<template>
  <el-main>
    <el-form 
      :model="LoginForm" 
      ref="LoginForm" 
      :rules="rule"
      label-width="0"
      class="login-form">
      <h3>用户登录</h3>

      <el-form-item prop="username">
        <el-input 
          type="text" 
          v-model="LoginForm.username" 
          placeholder="username" >
        </el-input>
      </el-form-item>

      <el-form-item prop="password">
        <el-input 
          type="password" 
          v-model="LoginForm.password" 
          placeholder="password" >
        </el-input>
      </el-form-item>

      <el-form-item >
        <el-button 
          type="danger" 
          class="submitBtn"
          round
          @click.native.prevent="submit"
          :loading="logining">
          登录
        </el-button>
        <el-button 
          type="primary"
          class="resetBtn" 
          round
          @click.native.prevent="reset">
          重置
        </el-button>
        <hr>
        <!-- 需要注册时加上 -->
        <!-- <p>还没有账号，马上去<span class="to" @click="toregin">注册</span></p> -->
        <p>---</p>
      </el-form-item>
    </el-form>
  </el-main>
</template>

<script>
import router from "../../router";
import api from "../../fetch/api";
export default {
  name: "login",
  data() {
    return {
      LoginForm: {
        username: "",
        password: ""
      },
      logining: false,
      rule: {
        username: [
          {
            required: true,
            max: 14,
            min: 4,
            message: "用户名是必须的，长度为4-14位",
            trigger: "blur"
          }
        ],
        password: [
          {
            required: true,
            message: "密码是必须的！",
            trigger: "blur"
          }
        ]
      }
    };
  },
  methods: {
    // ...
    submit() {
      this.$refs.LoginForm.validate(valid => {
        if (valid) {
          this.logining = true;
          // 登录作为参数的用户信息
          let LoginParams = {
            username: this.LoginForm.username,
            password: this.LoginForm.password
          };
          // 调用axios登录接口
          api
            .Login(LoginParams)
            .then(
              res => {
                this.logining = false
                this.$message({
                  message: "登录成功!",
                  type: "success"
                });
                sessionStorage.setItem("user", JSON.stringify(res.data));
                setTimeout(() => {
                  this.$router.push("/");
                }, 1500);
              },
              err => {
                this.logining = false
                this.$message({
                  message: "用户名或密码错误！",
                  type: "warning"
                });
              }
            )
            .catch(error => {
              console.log(error);
            });
        } else {
          console.log("submit err");
        }
      });
    },
    reset() {
      this.$refs.LoginForm.resetFields();
    },
    toregin() {
      this.$router.push("/user/register");
    }
  }
};
</script>

<style lang="scss" scoped>
.login-form {
  margin: 20px auto;
  width: 310px;
  background: #fff;
  box-shadow: 0 0 35px #b4bccc;
  padding: 30px 30px 0 30px;
  border-radius: 25px;
}
.submitBtn {
  width: 65%;
}
.to {
  color: #67c23a;
  cursor: pointer;
}
</style>
